<template>
  <slot name="toolbar" :columns="columns"></slot>
  <a-table
    :bordered="bordered"
    :pagination="false"
    row-key="frontKey"
    :columns="columns"
    :data-source="tableData"
    :scroll="scroll"
  >
    <template #bodyCell="{ column, record, index }">
      <template v-if="column.key === 'reasons'">
        <div class="cell-wrapper">
          <template v-if="record.reasons.length">
            <a-tag class="mt-2 first-0" color="orange" :key="index" v-for="(reason, index) in record.reasons">
              {{ reason }}
            </a-tag>
          </template>
          <span v-else>--</span>
        </div>
      </template>
      <template v-if="column.key === 'operate'">
        <a-button type="primary" danger @click="handleKeywordDelete(record, index)">
          <template #icon>
            <delete-outlined />
          </template>
          删除
        </a-button>
      </template>
    </template>
  </a-table>
</template>

<script lang="ts" setup>
import { DeleteOutlined } from '@ant-design/icons-vue'
import type { TableProps } from 'ant-design-vue'
import { useVModel } from '@vueuse/core'
import { computed } from 'vue'
import { cloneDeep, compact, groupBy } from 'lodash-es'
import { useCategory } from '@/hooks/useCategotry'
import type { PriceKeyword } from '@/core/interfaces/keyword'
import { PlatformEnum, ProductEnum } from '@/core/enums/platform'
import { PlatformKeyMap } from '@/core/mapper/platform'
import { AuthEnum } from '@/core/enums/auth'
import { useMainStore } from '@/store/useMainStore'
const { ADMIN, AGENT, AGENT_BOSS, SALES, OPERATION, CUSTOMER } = AuthEnum
const mainStore = useMainStore()

interface Props {
  bordered?: boolean
  loading?: boolean
  showOperate?: boolean
  showHeatRate?: boolean
  scroll?: any
  rawKeywordTableData?: PriceKeyword[]
  selectedTableData: PriceKeyword[]
  category?: ProductEnum
  msiusidppoi?: number
  type?: number
  platformNames?: string
}

const props = withDefaults(defineProps<Props>(), {
  loading: false,
  bordered: true,
  scroll: { y: 860 },
  showOperate: true,
  showHeatRate: false,
  selectedTableData: () => [],
  rawKeywordTableData: () => [],
  category: ProductEnum.CiBao,
  msiusidppoi: 3,
  type: 0
})

const selectedTable = useVModel(props, 'selectedTableData')
const rawKeywordTable = useVModel(props, 'rawKeywordTableData')
const { BW, BWYXB } = useCategory(props.category)

const showHeatRateWithCategory = computed(() => {
  return (BW || BWYXB) && props.showHeatRate
})

const tableData = computed(() => {
  if (showHeatRateWithCategory.value) {
    const data = cloneDeep(selectedTable.value)
    // 这里有个业务需求，如果移动端热度低于pc端热度，则移动端热度改为pc端热度
    Object.values(groupBy(data, (d) => d.name)).forEach((withName) => {
      const pc = withName.find((item) => item.clientType === PlatformEnum.PC)
      const mobile = withName.find((item) => item.clientType === PlatformEnum.MOBILE)
      if (pc && mobile) {
        if (pc.heatRate > mobile.heatRate) {
          mobile.heatRate = pc.heatRate
        }
      }
    })
    return data
  } else {
    return selectedTable.value
  }
})

const columns = computed<TableProps['columns']>(() => {
  return compact([
    props.platformNames && {
      title: '平台',
      dataIndex: 'platformNames',
      key: 'platformNames',
      customRender: () => {
        return props.platformNames || '--'
      }
    },
    {
      title: '已选关键词',
      dataIndex: 'name',
      key: 'name'
    },
    ...(props.type === ProductEnum.BWSD || props.type === ProductEnum.BWSDYXB
      ? [
          {
            title: '热度',
            dataIndex: 'heatRate',
            key: 'heatRate'
          }
        ]
      : []),
    showHeatRateWithCategory.value && {
      title: '关键词热度',
      dataIndex: 'heatRate',
      key: 'heatRate'
    },
    mainStore.userInfo?.type === 1 &&
      props.msiusidppoi === 1 && {
        title: '电脑端倍数',
        dataIndex: 'pcRatio',
        key: 'pcRatio'
      },
    mainStore.userInfo?.type === 1 &&
      props.msiusidppoi === 1 && {
        title: '移动端倍数',
        dataIndex: 'wapRatio',
        key: 'wapRatio'
      },
    props.showOperate && {
      title: '操作',
      dataIndex: 'operate',
      key: 'operate',
      width: '100px'
    }
  ])
})

function handleKeywordDelete(record: PriceKeyword, i: number) {
  const findItem = rawKeywordTable.value.find((item) => item.frontKey === record.frontKey)
  if (findItem) {
    findItem.selected = false
  }

  selectedTable.value.splice(i, 1)
}
</script>

<style lang="scss" scoped>
.first-0 {
  &:first-child {
    margin-top: 0;
  }
}
</style>
